<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健身中心智能控制系统</title>
    <!-- 引入Tailwind CSS框架 -->
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <!-- 引入Font Awesome图标库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    
    <!-- 全局样式 -->
    <style>
        /* 基础中控风格样式 - 优化背景和透明度 */
        body {
            background-color: #1e293b;
            position: relative;
            min-height: 100vh;
        }
        
        /* 添加背景图片并设置半透明效果 */
        body::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?q=80&w=2070&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
            opacity: 0.25; /* 设置背景图片透明度 */
            z-index: -1;
        }
        
        /* 中控屏边框效果 - 提高透明度 */
        .control-panel {
            border: 1px solid rgba(59, 130, 246, 0.2);
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.05);
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(10px);
        }
        
        /* 数据卡片样式 - 提高透明度 */
        .data-card {
            border: 1px solid rgba(255, 255, 255, 0.15);
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.08);
        }
        
        .data-card:hover {
            border-color: rgba(249, 115, 22, 0.4);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(249, 115, 22, 0.1);
            background: rgba(255, 255, 255, 0.15);
        }
        
        /* 按钮样式 - 提高透明度 */
        .control-btn {
            border: 1px solid rgba(59, 130, 246, 0.2);
            background: rgba(255, 255, 255, 0.1);
            transition: all 0.2s ease;
            color: #e2e8f0;
        }
        
        .control-btn:hover {
            border-color: rgba(249, 115, 22, 0.4);
            background: rgba(255, 255, 255, 0.2);
            color: #ffffff;
        }
        
        .control-btn.active {
            background: linear-gradient(90deg, rgba(59, 130, 246, 0.2), rgba(249, 115, 22, 0.2));
            border-color: rgba(249, 115, 22, 0.5);
        }
        
        /* 数据输入框样式 */
        .data-input {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(59, 130, 246, 0.2);
            color: #e2e8f0;
        }
        
        .data-input:focus {
            border-color: rgba(249, 115, 22, 0.5);
            outline: none;
            background: rgba(255, 255, 255, 0.15);
        }
        
        /* 标题样式 */
        .panel-title {
            color: #f97316;
            border-bottom: 1px solid rgba(59, 130, 246, 0.1);
        }
        
        /* 状态指示器 */
        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
        }
        
        .status-online {
            background-color: #10b981;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
        }
        
        /* 渐变分隔线 */
        .gradient-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
        }
        
        /* 设备图标样式 */
        .equipment-icon {
            filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.2));
        }
        
        /* 顶部状态栏优化 */
        .top-bar {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(10px);
        }
        
        /* 页脚优化 */
        footer {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(10px);
        }
        
        /* 图表容器优化 */
        .chart-container {
            background: rgba(255, 255, 255, 0.08);
        }
        
        /* 添加一些动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade {
            animation: fadeIn 0.5s ease-out forwards;
        }
        
        .delay-100 { animation-delay: 0.1s; }
        .delay-200 { animation-delay: 0.2s; }
        .delay-300 { animation-delay: 0.3s; }
        .delay-400 { animation-delay: 0.4s; }
    </style>

    <!-- 全局变量定义 -->
    <script>
        // 定义API基础URL（实际项目中应替换为真实API地址）
        const API_BASE_URL = "http://your-api-endpoint.com/api";
        
        // 跳转到视频监控页面
        function goToVideoStream() {
            window.location.href = "http://192.168.31.170:8080/stream.html";
        }
        
        // 更新时间显示
        function updateDateTime() {
            const now = new Date();
            document.getElementById("currentDateTime").textContent = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
        }
        
        // 定时更新时间
        setInterval(updateDateTime, 1000);
        
        // 页面加载时初始化时间
        window.onload = updateDateTime;
    </script>

     <!-- 光照强度传感器 -->
    <script>
        async function getLightIntensity() {
            try {
                // 构建请求体
                const body = 'modbus_read=key=6';
                const response = await fetch('/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: body
                });

                // 读取原始响应文本
                const rawText = await response.text();
                console.log('光照强度原始响应文本:', rawText);

                // 查找 JSON 数据起始位置（两个连续换行符之后）
                const jsonStartIndex = rawText.indexOf('\r\n\r\n') + 4;
                const jsonData = rawText.slice(jsonStartIndex);
                console.log('光照强度提取的 JSON 数据:', jsonData);

                // 解析 JSON 数据
                const data = JSON.parse(jsonData);
                console.log('光照强度解析后的响应数据:', data);

                if (data.key === 6) {
                    document.getElementById("d1").value = data.value + " lux";
                }
            } catch (error) {
                console.error("请求光照强度数据失败:", error);
                if (error.name === 'SyntaxError') {
                    console.error('JSON 解析失败，可能服务器返回的数据格式有误');
                }
                document.getElementById("d1").value = "请求失败";
            }
        }
    </script>

    <!-- 温湿度传感器 -->
    <script>
        async function getTemperature() {
            try {
                // 构建请求体
                const body = 'modbus_read=key=4';
                const response = await fetch('/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: body
                });

                // 读取原始响应文本
                const rawText = await response.text();
                console.log('温度原始响应文本:', rawText);

                // 查找 JSON 数据起始位置（两个连续换行符之后）
                const jsonStartIndex = rawText.indexOf('\r\n\r\n') + 4;
                const jsonData = rawText.slice(jsonStartIndex);
                console.log('温度提取的 JSON 数据:', jsonData);

                // 解析 JSON 数据
                const data = JSON.parse(jsonData);
                console.log('温度解析后的响应数据:', data);

                if (data.key === 4) {
                    document.getElementById("d2").value = data.value + "°C";
                }else {
                    console.error('返回的 key 不匹配，期望 4，实际:', data.key);
                    document.getElementById("d2").value = "返回 key 不匹配";
                }
            } catch (error) {
                console.error("请求温度数据失败:", error);
                if (error.name === 'SyntaxError') {
                    console.error('JSON 解析失败，可能服务器返回的数据格式有误');
                }
                document.getElementById("d2").value = "请求失败";
            }
        }

        async function getHumidity() {
            try {
                // 构建请求体
                const body = 'modbus_read=key=16';
                const response = await fetch('/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: body
                });

                // 读取原始响应文本
                const rawText = await response.text();
                console.log('湿度原始响应文本:', rawText);

                // 查找 JSON 数据起始位置（两个连续换行符之后）
                const jsonStartIndex = rawText.indexOf('\r\n\r\n') + 4;
                const jsonData = rawText.slice(jsonStartIndex);
                console.log('湿度提取的 JSON 数据:', jsonData);

                // 解析 JSON 数据
                const data = JSON.parse(jsonData);
                console.log('湿度解析后的响应数据:', data);

                if (data.key === 16) {
                    document.getElementById("d3").value = data.value + "%";
                }else {
                    console.error('返回的 key 不匹配，期望 16，实际:', data.key);
                    document.getElementById("d3").value = "返回 key 不匹配";
                }
            } catch (error) {
                console.error("请求湿度数据失败:", error);
                if (error.name === 'SyntaxError') {
                    console.error('JSON 解析失败，可能服务器返回的数据格式有误');
                }
                document.getElementById("d3").value = "请求失败";
            }
        }
    </script>

    <!-- 空调温度 -->
    <script>
        async function getAirConditionerTemp() {
            try {
                // 构建请求体
                const body = 'modbus_read=key=101';
                console.log('发送请求体:', body);
                const response = await fetch('/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: body
                });

                // 读取原始响应文本
                const rawText = await response.text();
                console.log('原始响应文本:', rawText);

                // 查找 JSON 数据起始位置（两个连续换行符之后）
                const jsonStartIndex = rawText.indexOf('\r\n\r\n') + 4;
                const jsonData = rawText.slice(jsonStartIndex);
                console.log('提取的 JSON 数据:', jsonData);

                // 解析 JSON 数据
                const data = JSON.parse(jsonData);
                console.log('解析后的响应数据:', data);

                if (data.key === 101) {
                    document.getElementById("d4").value = data.value + "°C";
                } else {
                    console.error('返回的 key 不匹配，期望 101，实际:', data.key);
                    document.getElementById("d4").value = "返回 key 不匹配";
                }
            } catch (error) {
                console.error("请求空调温度数据失败:", error);
                if (error.name === 'SyntaxError') {
                    console.error('JSON 解析失败，可能服务器返回的数据格式有误');
                }
                document.getElementById("d4").value = "请求失败";
            }
        }
    </script>
    </script>

    <!-- 设备使用情况 -->
    <script>
        async function getEquipmentStatus() {
            try {
                // 构建请求体
                const body = 'modbus_read=key=5';
                const response = await fetch('/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: body
                });

                // 读取原始响应文本
                const rawText = await response.text();
                console.log('设备使用情况原始响应文本:', rawText);

                // 查找 JSON 数据起始位置（两个连续换行符之后）
                const jsonStartIndex = rawText.indexOf('\r\n\r\n') + 4;
                const jsonData = rawText.slice(jsonStartIndex);
                console.log('设备使用情况提取的 JSON 数据:', jsonData);

                // 解析 JSON 数据
                const data = JSON.parse(jsonData);
                console.log('设备使用情况解析后的响应数据:', data);

                if (data.key === 5) {
                    let statusText = data.value === 1 ? "使用中" : "空闲";
                    document.getElementById("d5").value = `${data.equipmentName}: ${statusText}`;
                }
            } catch (error) {
                console.error("请求设备状态数据失败:", error);
                if (error.name === 'SyntaxError') {
                    console.error('JSON 解析失败，可能服务器返回的数据格式有误');
                }
                document.getElementById("d5").value = "请求失败";
            }
        }
    </script>

    <!-- 设备控制函数 -->
    <script>
        async function controlDevice(deviceType, turnOn) {
            let key;
            switch(deviceType) {
                case "light":
                    key = 11;
                    break;
                case "air-conditioner":
                    key = 102; // 假设空调的 key 为 106
                    break;
                case "fan":
                    key = 13; // 假设风扇的 key 为 107
                    break;
                case "dehumidifier":
                    key = 103; // 假设除湿器的 key 为 108
                    break;
                case "sprinkler":
                    key = 104; // 假设喷淋系统的 key 为 109
                    break;
                case "sterilizer":
                    key = 105; // 假设消毒系统的 key 为 110
                    break;
                default:
                    console.error("未知设备类型:", deviceType);
                    return;
            }
            // 构建请求体
            const body = `modbus_write=key=${key}&value=${turnOn ? 1 : 0}&type=1`;
            try {
                const response = await fetch('/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: body
                });
                const data = await response.json();
                if(data.status === 'success') {
                    updateControlState(deviceType, turnOn);
                } else {
                    console.error('控制失败:', data.error);
                }
            } catch (error) {
                console.error('请求失败:', error);
            }
        }

// 更新设备初始化函数
function initDeviceStates() {
    fetch('/status?shm_read=all')
    .then(response => response.json())
    .then(data => {
        updateControlState('light', data.light === 1);
        updateControlState('ac', data.ac === 1);
        updateControlState('fan', data.fan === 1);
        updateControlState('dehumidifier', data.dehumidifier === 1);
        updateControlState('sprinkler', data.sprinkler === 1);
        updateControlState('sterilizer', data.sterilizer === 1);
    });
}

// 页面加载时初始化
window.addEventListener('DOMContentLoaded', initDeviceStates);

        // 灯光控制
        function toggleLight(turnOn) {
            controlDevice("light", turnOn);
            updateControlState('light', turnOn);
        }
        
        // 空调控制
        function toggleAirConditioner(turnOn) {
            controlDevice("air-conditioner", turnOn);
            updateControlState('ac', turnOn);
        }
        
        // 风扇控制
        function toggleFan(turnOn) {
            controlDevice("fan", turnOn);
            updateControlState('fan', turnOn);
        }
        
        // 除湿器控制
        function toggleDehumidifier(turnOn) {
            controlDevice("dehumidifier", turnOn);
            updateControlState('dehumidifier', turnOn);
        }
        
        // 喷淋控制
        function toggleSprinkler(turnOn) {
            controlDevice("sprinkler", turnOn);
            updateControlState('sprinkler', turnOn);
        }
        
        // 消毒控制
        function toggleSterilizer(turnOn) {
            controlDevice("sterilizer", turnOn);
            updateControlState('sterilizer', turnOn);
        }
        
        // 更新控制状态UI
        function updateControlState(prefix, active) {
            const onBtn = document.getElementById(`${prefix}-on`);
            const offBtn = document.getElementById(`${prefix}-off`);
            
            if (active) {
                onBtn.classList.add('active');
                offBtn.classList.remove('active');
            } else {
                onBtn.classList.remove('active');
                offBtn.classList.add('active');
            }
        }
        
        // 页面加载时初始化所有控制按钮状态
        window.addEventListener('DOMContentLoaded', (event) => {
            updateControlState('light', true);
            updateControlState('ac', false);
            updateControlState('fan', false);
            updateControlState('dehumidifier', false);
            updateControlState('sprinkler', false);
            updateControlState('sterilizer', false);
        });
    </script>
</head>

<body class="font-sans text-gray-200 min-h-screen">
    <!-- 顶部状态栏 -->
    <div class="top-bar p-3 border-b border-blue-900/30">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex items-center animate-fade">
                <i class="fas fa-dumbbell text-orange-500 text-2xl mr-3 equipment-icon"></i>
                <div>
                    <h1 class="text-xl font-bold text-white">健身中心智能控制系统</h1>
                    <p class="text-sm text-blue-300">健身房中控管理平台</p>
                </div>
            </div>
            
            <div class="flex items-center gap-6 animate-fade delay-100">
                <div class="flex items-center">
                    <span class="status-indicator status-online mr-2"></span>
                    <span class="text-green-400 text-sm">系统运行正常</span>
                </div>
                <div class="text-gray-300 text-sm" id="currentDateTime"></div>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4 py-8">
        <!-- 快速操作栏 -->
        <div class="flex flex-wrap gap-4 mb-8 justify-center">
            <button onclick="goToVideoStream()" 
                    class="control-btn text-white py-3 px-6 rounded-lg flex items-center gap-2 hover:scale-105 transition-transform animate-fade">
                <i class="fas fa-video text-orange-400 text-lg"></i>
                <span class="font-semibold">实时监控</span>
            </button>
            
            <button onclick="getLightIntensity(); getTemperature(); getHumidity(); getAirConditionerTemp(); getEquipmentStatus()" 
                    class="control-btn text-white py-3 px-6 rounded-lg flex items-center gap-2 hover:scale-105 transition-transform animate-fade delay-100">
                <i class="fas fa-sync-alt text-blue-400 text-lg"></i>
                <span class="font-semibold">刷新所有数据</span>
            </button>
            
            <button class="control-btn text-white py-3 px-6 rounded-lg flex items-center gap-2 hover:scale-105 transition-transform animate-fade delay-200">
                <i class="fas fa-chart-pie text-green-400 text-lg"></i>
                <span class="font-semibold">使用统计</span>
            </button>
            
            <button class="control-btn text-white py-3 px-6 rounded-lg flex items-center gap-2 hover:scale-105 transition-transform animate-fade delay-300">
                <i class="fas fa-cog text-purple-400 text-lg"></i>
                <span class="font-semibold">系统设置</span>
            </button>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- 环境数据监测面板 -->
            <div class="control-panel p-6 rounded-lg animate-fade">
                <div class="panel-title pb-3 mb-6 flex justify-between items-center">
                    <h2 class="text-xl font-bold flex items-center">
                        <i class="fas fa-chart-line mr-2"></i>环境数据监测
                    </h2>
                    <span class="text-xs bg-blue-900/50 text-blue-300 px-2 py-1 rounded-full">实时更新</span>
                </div>
                
                <!-- 数据卡片网格 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <!-- 光照强度 -->
                    <div class="data-card p-4 rounded-lg">
                        <div class="flex justify-between items-center mb-3">
                            <label for="d1" class="font-semibold flex items-center">
                                <i class="fas fa-sun text-yellow-500 mr-2"></i>
                                光照强度
                            </label>
                            <span class="text-xs text-blue-400">lux</span>
                        </div>
                        <input type="text" id="d1" value="点击刷新获取数据"
                            class="data-input w-full p-3 rounded-md mb-3">
                        <button onclick="getLightIntensity()"
                            class="control-btn w-full text-white py-2 rounded-md flex items-center justify-center">
                            <i class="fas fa-refresh mr-2"></i>刷新数据
                        </button>
                    </div>
                    
                    <!-- 温度 -->
                    <div class="data-card p-4 rounded-lg">
                        <div class="flex justify-between items-center mb-3">
                            <label for="d2" class="font-semibold flex items-center">
                                <i class="fas fa-thermometer-half text-red-500 mr-2"></i>
                                温度
                            </label>
                            <span class="text-xs text-blue-400">°C</span>
                        </div>
                        <input type="text" id="d2" value="点击刷新获取数据"
                            class="data-input w-full p-3 rounded-md mb-3">
                        <button onclick="getTemperature()"
                            class="control-btn w-full text-white py-2 rounded-md flex items-center justify-center">
                            <i class="fas fa-refresh mr-2"></i>刷新数据
                        </button>
                    </div>
                    
                    <!-- 湿度 -->
                    <div class="data-card p-4 rounded-lg">
                        <div class="flex justify-between items-center mb-3">
                            <label for="d3" class="font-semibold flex items-center">
                                <i class="fas fa-tint text-blue-400 mr-2"></i>
                                湿度
                            </label>
                            <span class="text-xs text-blue-400">%</span>
                        </div>
                        <input type="text" id="d3" value="点击刷新获取数据"
                            class="data-input w-full p-3 rounded-md mb-3">
                        <button onclick="getHumidity()"
                            class="control-btn w-full text-white py-2 rounded-md flex items-center justify-center">
                            <i class="fas fa-refresh mr-2"></i>刷新数据
                        </button>
                    </div>
                    
                    <!-- 空调温度 -->
                    <div class="data-card p-4 rounded-lg">
                        <div class="flex justify-between items-center mb-3">
                            <label for="d4" class="font-semibold flex items-center">
                                <i class="fas fa-snowflake text-blue-300 mr-2"></i>
                                空调温度
                            </label>
                            <span class="text-xs text-blue-400">°C</span>
                        </div>
                        <input type="text" id="d4" value="点击刷新获取数据"
                            class="data-input w-full p-3 rounded-md mb-3">
                        <button onclick="getAirConditionerTemp()"
                            class="control-btn w-full text-white py-2 rounded-md flex items-center justify-center">
                            <i class="fas fa-refresh mr-2"></i>刷新数据
                        </button>
                    </div>
                    
                    <!-- 设备使用情况 -->
                    <div class="data-card p-4 rounded-lg md:col-span-2">
                        <div class="flex justify-between items-center mb-3">
                            <label for="d5" class="font-semibold flex items-center">
                                <i class="fas fa-dumbbell text-gray-300 mr-2"></i>
                                设备使用情况
                            </label>
                            <span class="text-xs text-blue-400">状态</span>
                        </div>
                        <input type="text" id="d5" value="点击刷新获取数据"
                            class="data-input w-full p-3 rounded-md mb-3">
                        <button onclick="getEquipmentStatus()"
                            class="control-btn w-full text-white py-2 rounded-md flex items-center justify-center">
                            <i class="fas fa-refresh mr-2"></i>刷新数据
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 设备控制面板 -->
            <div class="control-panel p-6 rounded-lg animate-fade delay-100">
                <div class="panel-title pb-3 mb-6 flex justify-between items-center">
                    <h2 class="text-xl font-bold flex items-center">
                        <i class="fas fa-sliders-h mr-2"></i>设备控制中心
                    </h2>
                    <span class="text-xs bg-green-900/50 text-green-300 px-2 py-1 rounded-full">边缘控制</span>
                </div>
                
                <!-- 控制卡片网格 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <!-- 灯光控制 -->
                    <div class="data-card p-4 rounded-lg">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-lightbulb text-yellow-400 text-2xl mr-3"></i>
                            <h3 class="font-semibold">灯光控制</h3>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <button id="light-on" onclick="toggleLight(true)"
                                class="control-btn active text-white py-2 rounded-md flex items-center justify-center">
                                <i class="fas fa-power-off mr-1"></i> 开启
                            </button>
                            <button id="light-off" onclick="toggleLight(false)"
                                class="control-btn text-white py-2 rounded-md flex items-center justify-center">
                                <i class="fas fa-power-off mr-1"></i> 关闭
                            </button>
                        </div>
                    </div>
                    
                    <!-- 空调控制 -->
                    <div class="data-card p-4 rounded-lg">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-snowflake text-blue-300 text-2xl mr-3"></i>
                            <h3 class="font-semibold">空调控制</h3>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <button id="ac-on" onclick="toggleAirConditioner(true)"
                                class="control-btn text-white py-2 rounded-md flex items-center justify-center">
                                <i class="fas fa-power-off mr-1"></i> 开启
                            </button>
                            <button id="ac-off" onclick="toggleAirConditioner(false)"
                                class="control-btn active text-white py-2 rounded-md flex items-center justify-center">
                                <i class="fas fa-power-off mr-1"></i> 关闭
                            </button>
                        </div>
                    </div>
                    
                    <!-- 风扇控制 -->
                    <div class="data-card p-4 rounded-lg">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-fan text-teal-400 text-2xl mr-3"></i>
                            <h3 class="font-semibold">风扇控制</h3>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <button id="fan-on" onclick="toggleFan(true)"
                                class="control-btn text-white py-2 rounded-md flex items-center justify-center">
                                <i class="fas fa-power-off mr-1"></i> 开启
                            </button>
                            <button id="fan-off" onclick="toggleFan(false)"
                                class="control-btn active text-white py-2 rounded-md flex items-center justify-center">
                                <i class="fas fa-power-off mr-1"></i> 关闭
                            </button>
                        </div>
                    </div>
                    
                    <!-- 除湿器控制 -->
                    <div class="data-card p-4 rounded-lg">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-tint text-purple-400 text-2xl mr-3"></i>
                            <h3 class="font-semibold">除湿器控制</h3>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <button id="dehumidifier-on" onclick="toggleDehumidifier(true)"
                                class="control-btn text-white py-2 rounded-md flex items-center justify-center">
                                <i class="fas fa-power-off mr-1"></i> 开启
                            </button>
                            <button id="dehumidifier-off" onclick="toggleDehumidifier(false)"
                                class="control-btn active text-white py-2 rounded-md flex items-center justify-center">
                                <i class="fas fa-power-off mr-1"></i> 关闭
                            </button>
                        </div>
                    </div>
                    
                    <!-- 喷淋系统 -->
                    <div class="data-card p-4 rounded-lg">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-shower text-green-400 text-2xl mr-3"></i>
                            <h3 class="font-semibold">喷淋系统</h3>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <button id="sprinkler-on" onclick="toggleSprinkler(true)"
                                class="control-btn text-white py-2 rounded-md flex items-center justify-center">
                                <i class="fas fa-power-off mr-1"></i> 开启
                            </button>
                            <button id="sprinkler-off" onclick="toggleSprinkler(false)"
                                class="control-btn active text-white py-2 rounded-md flex items-center justify-center">
                                <i class="fas fa-power-off mr-1"></i> 关闭
                            </button>
                        </div>
                    </div>
                    
                    <!-- 消毒系统 -->
                    <div class="data-card p-4 rounded-lg">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-spray-can text-red-400 text-2xl mr-3"></i>
                            <h3 class="font-semibold">消毒系统</h3>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <button id="sterilizer-on" onclick="toggleSterilizer(true)"
                                class="control-btn text-white py-2 rounded-md flex items-center justify-center">
                                <i class="fas fa-power-off mr-1"></i> 开启
                            </button>
                            <button id="sterilizer-off" onclick="toggleSterilizer(false)"
                                class="control-btn active text-white py-2 rounded-md flex items-center justify-center">
                                <i class="fas fa-power-off mr-1"></i> 关闭
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 数据图表区域 -->
        <div class="control-panel p-6 rounded-lg mt-6 animate-fade delay-200">
            <div class="panel-title pb-3 mb-6 flex justify-between items-center">
                <h2 class="text-xl font-bold flex items-center">
                    <i class="fas fa-chart-area mr-2"></i>环境数据趋势
                </h2>
                <div class="flex items-center gap-2">
                    <button class="text-xs bg-blue-900/50 text-blue-300 px-2 py-1 rounded-full">24小时</button>
                    <button class="text-xs bg-gray-800 text-gray-400 px-2 py-1 rounded-full">7天</button>
                    <button class="text-xs bg-gray-800 text-gray-400 px-2 py-1 rounded-full">30天</button>
                </div>
            </div>
            
            <div class="chart-container p-4 rounded-lg h-64">
                <canvas id="environmentChart"></canvas>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="p-4 mt-8 border-t border-blue-900/30">
        <div class="container mx-auto text-center text-gray-400 text-sm">
            <p>健身中心智能控制系统 v2.0 | 基于边缘计算技术</p>
            <p class="mt-1">系统状态: <span class="text-green-400">正常运行中</span> | 上次更新: <span id="lastUpdate">2025-07-08 12:30:45</span></p>
        </div>
    </footer>
    
    <!-- Chart.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- 初始化图表 -->
    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 获取Canvas元素
            const ctx = document.getElementById('environmentChart').getContext('2d');
            
            // 模拟环境数据
            const labels = Array.from({length: 24}, (_, i) => `${i}:00`);
            
            // 生成模拟数据
            function generateRandomData(min, max, count) {
                return Array.from({length: count}, () => Math.floor(Math.random() * (max - min + 1)) + min);
            }
            
            const temperatureData = generateRandomData(22, 26, 24);
            const humidityData = generateRandomData(40, 60, 24);
            const lightData = generateRandomData(300, 800, 24);
            
            // 创建图表
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: '温度 (°C)',
                            data: temperatureData,
                            borderColor: '#ef4444',
                            backgroundColor: 'rgba(239, 68, 68, 0.1)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '湿度 (%)',
                            data: humidityData,
                            borderColor: '#3b82f6',
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '光照 (lux)',
                            data: lightData,
                            borderColor: '#eab308',
                            backgroundColor: 'rgba(234, 179, 8, 0.1)',
                            tension: 0.4,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                color: '#e2e8f0'
                            }
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                color: 'rgba(255, 255, 255, 0.05)'
                            },
                            ticks: {
                                color: '#94a3b8'
                            }
                        },
                        y: {
                            grid: {
                                color: 'rgba(255, 255, 255, 0.05)'
                            },
                            ticks: {
                                color: '#94a3b8'
                            }
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>